<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="14" :offset="5">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span class="title">菜品添加</span>
                    </div>
                    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
                        <el-form-item label="菜品名称" prop="name">
                            <el-input v-model="ruleForm.name"></el-input>
                        </el-form-item>
                        <el-form-item label="菜品分类" prop="categoryId">
                            <el-radio-group v-model="ruleForm.categoryId">
                                <el-radio label="1397844263642378242">湘菜</el-radio>
                                <el-radio label="1397844303408574465">川菜</el-radio>
                                <el-radio label="1397844391040167938">粤菜</el-radio>
                                <el-radio label="1413341197421846529">饮品</el-radio>
                                <el-radio label="1413342269393674242">商务套餐</el-radio>
                                <el-radio label="1413384954989060097">主食</el-radio>
                                <el-radio label="1413386191767674881">儿童套餐</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="菜品图片" prop="image">
                            <el-input v-model="ruleForm.image"></el-input>
                        </el-form-item>
                        <el-form-item label="菜品价格" prop="price">
                            <el-input v-model.number="ruleForm.price"></el-input>
                        </el-form-item>
                        <el-form-item label="商品码" prop="code">
                            <el-input v-model="ruleForm.code"></el-input>
                        </el-form-item>
                        <el-form-item label="口味名称" prop="flavorName">
                            <el-input v-model="ruleForm.flavorName" placeholder="请使用;区分不同的口味"></el-input>
                        </el-form-item>
                        <el-form-item label="口味选择单" prop="value">
                            <el-input v-model="ruleForm.value" placeholder="请使用;区分不同的口味,用英式,区分相同口味的选择"></el-input>
                        </el-form-item>
                        <el-form-item label="菜品描述" prop="description">
                            <el-input type="textarea" v-model="ruleForm.description"></el-input>
                        </el-form-item>
                        <el-form-item label="商家Id" prop="marketerId">
                            <el-input v-model="ruleForm.marketerId"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
                            <el-button @click="resetForm('ruleForm')">重置</el-button>
                        </el-form-item>
                    </el-form>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import { addDish } from '@/utils/requests.js'

export default {
    data() {
        var validateFlavorName = (rule,value,callback) =>{
            if(value == ''){
                callback(new Error('请填写内容'))
            }
            let dataName = value.split(';')
            for(let i = 0 ; i < dataName.length ; i++){
                if(dataName[i] == ''){
                    callback(new Error('格式错误,末尾不得有分号'))
                }
                if(dataName[i].indexOf("；") != -1){
                    callback(new Error('请使用英式分号'))
                    return 
                }
                if(dataName[i].indexOf("，") != -1){
                    callback(new Error('请使用英式逗号'))
                    return 
                }
            }
            callback()
        }
        var validateFlavorValue = (rule,value,callback) =>{
            if(value == ''){
                callback(new Error('请填写内容'))
            }
            let dataName = value.split(';')
            for(let i = 0 ; i < dataName.length ; i++){
                if(dataName[i] == ''){
                    callback(new Error('格式错误,末尾不得有分号'))
                }
                if(dataName[i][dataName[i].length-1] == ','){
                    callback(new Error('请注意逗号位置是否正确'))
                }
                if(dataName[i].indexOf("；") != -1){
                    callback(new Error('请使用英式分号'))
                    return 
                }
                if(dataName[i].indexOf("，") != -1){
                    callback(new Error('请使用英式逗号'))
                    return 
                }
            }
            callback()
        }
        return {
            ruleForm: {
                name: '',
                categoryId: '1397844263642378242',
                price: 0,
                description: '',
                code: '',
                image: '',
                flavorName:'',
                value:'',
                marketerId:''
            },
            rules: {
                name: [
                    { required: true, message: '请输入菜品名称', trigger: 'blur' },
                    { min: 3, max: 50, message: '长度在 3 到 50 个字符', trigger: 'blur' }
                ],
                categoryId: [
                    { required: true, message: '请选择菜品分类', trigger: 'change'  },
                ],
                marketerId: [
                    { required: true, message: '商家Id不能为空'},
                ],
                price: [
                    { required: true, message: '价格不能为空' },
                    { type: 'number', message: '价格必须为数字', trigger: 'keyup' }
                ],
                description: [
                    { required: true, message: '请填写对食品的描述', trigger: 'blur' }
                ],
                code: [
                    { required: true, message: '请输入商品码', trigger: 'blur' },
                    { min: 5, max: 17, messagae: '长度在 5 到 17 个字符', trigger: 'blur' }
                ],
                image: [
                    { required: true, message: '请输入商品图片名称', trigger: 'blur' },
                    { min: 5, max: 17, messagae: '长度在 5 到 17 个字符', trigger: 'blur' }
                ],
                flavorName:[
                    {validator: validateFlavorName, trigger : 'blur'}
                ],
                value:[
                    {validator: validateFlavorValue, trigger : 'blur'}
                ]
            }
        }
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    addDish(this.ruleForm).then((res) => {
                        if (res.statusCode == 200) {
                            this.$message({
                                type: 'success',
                                message: res.message,
                                showClose: true

                            })
                            this.$router.go(-1)
                        } else {
                            this.$message({
                                type: 'error',
                                message: res.message,
                                showClose: true
                            })
                        }
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    }
}
</script>
<style>
.title{
    color: rgb(25, 202, 173);
    font-size: large;
    font-weight: 600;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}
</style>